<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">个人中心</text>
      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-bg">
        <view class="user-info">
          <image class="user-avatar" src="/static/avatar.jpg" mode="aspectFill"></image>
          <view class="user-details">
            <text class="user-name">{{ user.name }}</text>
            <text class="user-phone">{{ user.phone }}</text>
            <view class="user-level">{{ user.level }}</view>
          </view>
          <view class="edit-profile-btn" @tap="goToEditProfile">
            <text class="btn-text">编辑资料</text>
          </view>
        </view>

        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value">66.8</text>
            <text class="stat-label">积分</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">¥1000</text>
            <text class="stat-label">余额</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="quick-actions">
      <view class="action-item" @tap="goToOrders">
        <view class="action-icon orders-icon">
          <text class="icon-text">📦</text>
        </view>
        <text class="action-text">我的订单</text>
      </view>

      <view class="action-item" @tap="goToAddresses">
        <view class="action-icon addresses-icon">
          <text class="icon-text">📍</text>
        </view>
        <text class="action-text">收货地址</text>
      </view>

      <view class="action-item" @tap="goToWallet">
        <view class="action-icon wallet-icon">
          <text class="icon-text">💰</text>
        </view>
        <text class="action-text">我的钱包</text>
      </view>

      <view class="action-item" @tap="goToCoupons">
        <view class="action-icon coupons-icon">
          <text class="icon-text">🎫</text>
        </view>
        <text class="action-text">优惠券</text>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-status">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <view class="more-btn" @tap="goToOrders">
          <text class="more-text">查看全部 →</text>
        </view>
      </view>
      
      <view class="status-grid">
        <view class="status-item" @tap="goToOrders('pending')">
          <view class="status-icon-container">
            <view class="status-icon pending-icon">
              <text class="icon-text">⏰</text>
            </view>
            <view v-if="orderCounts.pending > 0" class="status-badge">!</view>
          </view>
          <text class="status-text">待付款</text>
        </view>

        <view class="status-item" @tap="goToOrders('processing')">
          <view class="status-icon-container">
            <view class="status-icon processing-icon">
              <text class="icon-text">📦</text>
            </view>
            <view v-if="orderCounts.processing > 0" class="status-badge">!</view>
          </view>
          <text class="status-text">待发货</text>
        </view>

        <view class="status-item" @tap="goToOrders('shipping')">
          <view class="status-icon-container">
            <view class="status-icon shipping-icon">
              <text class="icon-text">🚚</text>
            </view>
          </view>
          <text class="status-text">待收货</text>
        </view>

        <view class="status-item" @tap="goToOrders('completed')">
          <view class="status-icon-container">
            <view class="status-icon completed-icon">
              <text class="icon-text">✅</text>
            </view>
          </view>
          <text class="status-text">已完成</text>
        </view>

        <view class="status-item" @tap="goToOrders('refund')">
          <view class="status-icon-container">
            <view class="status-icon refund-icon">
              <text class="icon-text">↩️</text>
            </view>
          </view>
          <text class="status-text">退款/售后</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-item" @tap="goToFavorites">
        <view class="menu-icon">❤️</view>
        <text class="menu-text">我的收藏</text>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @tap="goToHistory">
        <view class="menu-icon">👁️</view>
        <text class="menu-text">浏览历史</text>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @tap="goToReviews">
        <view class="menu-icon">⭐</view>
        <text class="menu-text">我的评价</text>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @tap="goToCustomerService">
        <view class="menu-icon">🎧</view>
        <text class="menu-text">客服中心</text>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @tap="goToSettings">
        <view class="menu-icon">⚙️</view>
        <text class="menu-text">设置</text>
        <text class="menu-arrow">→</text>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <view class="logout-btn" @tap="logout">
        <text class="logout-icon">🚪</text>
        <text class="logout-text">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script>

const BASE_URL = getApp().$vm.$global.baseURL

export default {
  
    data() {
      return {
        user: {
          name: "",
          phone: "",
          avatar: '/static/avatar.jpg',
          level: "",
          points: 0,
          balance: 0
        },
        orderCounts: {
          pending: 2,
          processing: 1,
          shipping: 0,
          completed: 0,
          refund: 0
        }
      }
    },
  
    onLoad() {
      const username = uni.getStorageSync('username') // 假设登录时保存过用户名
      if (username) {
        this.fetchUserInfo(username)
      } else {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.redirectTo({ url: '/pages/login/login' })
        }, 1500)
      }
    },
  
    methods: {
      fetchUserInfo(username) {
        uni.request({
          url: `${BASE_URL}/userinfo/${username}`,
          method: 'GET',
          success: (res) => {
            console.log('获取用户信息响应：', res)
            if (res.data && res.data.code === "200") {
              const data = res.data.data
              this.user = {
                name: data.username || "未知用户",
                phone: data.phone || "",
                avatar: data.avatarUrl ? (BASE_URL + data.avatarUrl) : "", // 拼接头像完整路径
                level: data.role === 'admin' ? '管理员' : '普通会员',
                points: 0, // 后端没有返回，默认值
                balance: 0 // 后端没有返回，默认值
              }
            } else {
              uni.showToast({
                title: '加载失败',
                icon: 'none'
              })
            }
          },
          fail: () => {
            uni.showToast({
              title: '网络异常',
              icon: 'none'
            })
          }
        })
      }
,
  
      // 其他跳转方法保持不变
      goToEditProfile() {
        uni.navigateTo({ url: '/pages/profile/edit' })
      },
      goToOrders(status = '') {
        const url = status ? `/pages/orders/orders?status=${status}` : '/pages/orders/orders'
        uni.navigateTo({ url })
      },
      goToAddresses() {
        uni.navigateTo({ url: '/pages/address/address' })
      },
      goToWallet() {
        uni.navigateTo({ url: '/pages/wallet/wallet' })
      },
      goToCoupons() {
        uni.navigateTo({ url: '/pages/coupons/coupons' })
      },
      goToFavorites() {
        uni.navigateTo({ url: '/pages/favorites/favorites' })
      },
      goToHistory() {
        uni.navigateTo({ url: '/pages/history/history' })
      },
      goToReviews() {
        uni.navigateTo({ url: '/pages/reviews/reviews' })
      },
      goToCustomerService() {
        uni.navigateTo({ url: '/pages/customer-service/customer-service' })
      },
      goToSettings() {
        uni.navigateTo({ url: '/pages/settings/settings' })
      },
      logout() {
        uni.showModal({
          title: '确认退出',
          content: '确定要退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              uni.clearStorageSync()
              uni.showToast({ title: '已退出登录', icon: 'success' })
              setTimeout(() => {
                uni.reLaunch({ url: '/pages/login/login' })
              }, 1500)
            }
          }
        })
      }
    }
  }

</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航 */
.header {
  background-color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 20rpx 30rpx;
  text-align: center;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 用户信息卡片 */
.user-card {
  margin: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
}

.user-bg {
  background: linear-gradient(135deg, #388f4a, #4caf50);
  padding: 40rpx 30rpx;
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid white;
  margin-right: 30rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
}

.user-phone {
  font-size: 24rpx;
  opacity: 0.8;
  margin-bottom: 16rpx;
  display: block;
}

.user-level {
  background-color: rgba(255, 193, 7, 0.9);
  color: #333;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.edit-profile-btn {
  border: 2rpx solid white;
  padding: 16rpx 24rpx;
  border-radius: 50rpx;
  background-color: transparent;
}

.btn-text {
  font-size: 24rpx;
  color: white;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 快捷功能 */
.quick-actions {
  background-color: white;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.orders-icon {
  background: linear-gradient(45deg, #3498db, #2980b9);
}

.addresses-icon {
  background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.wallet-icon {
  background: linear-gradient(45deg, #f39c12, #e67e22);
}

.coupons-icon {
  background: linear-gradient(45deg, #9b59b6, #8e44ad);
}

.icon-text {
  color: white;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 订单状态 */
.order-status {
  background-color: white;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.more-text {
  font-size: 24rpx;
  color: #999;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30rpx;
  text-align: center;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.status-icon-container {
  position: relative;
}

.status-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.pending-icon {
  background-color: #fff3cd;
}

.processing-icon {
  background-color: #d1ecf1;
}

.shipping-icon {
  background-color: #d4edda;
}

.completed-icon {
  background-color: #f8f9fa;
}

.refund-icon {
  background-color: #f8d7da;
}

.status-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff4757;
  color: white;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 28rpx;
  text-align: center;
}

.status-text {
  font-size: 20rpx;
  color: #666;
}

/* 功能菜单 */
.menu-section {
  background-color: white;
  margin: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 32rpx;
  margin-right: 30rpx;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.menu-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 退出登录 */
.logout-section {
  margin: 30rpx;
}

.logout-btn {
  background-color: white;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.logout-icon {
  font-size: 32rpx;
}

.logout-text {
  font-size: 28rpx;
  color: #ff4757;
}
</style>
